<template>
  <el-card class="photo-config-item">
    <div
      slot="header"
      class="photo-config-item-title clearfix"
    >
      <el-tag
        v-if="indicate>=0"
        type="primary"
        effect="dark"
      >{{
        indicate+1
      }}</el-tag>{{data.name?data.name:''}}
      <span style="float: right">
        <el-button
          type="text"
          @click="removeItem()"
        >删除</el-button>
      </span>
    </div>

    <el-row
      type="flex"
      class="photo-config-item-content"
      justify="space-between"
    >
      <el-col :span="12">宽度</el-col>
      <el-col :span="12">{{ data.width }}毫米</el-col>
    </el-row>
    <el-row
      type="flex"
      class="photo-config-item-content"
      justify="space-between"
    >
      <el-col :span="12">高度</el-col>
      <el-col :span="12">{{ data.height }}毫米</el-col>
    </el-row>

    <el-row
      type="flex"
      class="photo-config-item-content"
      justify="space-between"
    >
      <el-col :span="12">DPI</el-col>
      <el-col :span="12">{{ data.dpi }}</el-col>
    </el-row>

    <el-row
      type="flex"
      class="photo-config-item-content"
      justify="space-between"
    >
      <el-col :span="12">数量</el-col>
      <el-col :span="12">{{ data.number }}</el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props: {
    indicate: {
      type: Number
    },
    data: {
      type: Object,
      default: () => {
        return {
          width: 100,
          height: 100,
          dpi: 250
        }
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    removeItem () {
      this.$emit('on-item-remove', this.indicate)
    }
  }
}
</script>

<style lang="scss" scoped>
.photo-config-item {
  display: inline-block;
  width: 23%;
  font-size: 12px;
  margin: 1%;
  .photo-config-item-content {
    margin-bottom: 5px;
  }
}
</style>
<style>
.el-card__header {
  padding: 2px 10px;
}
</style>
